<template>
  <div class="box">
    <div class="tag-list">
      <el-table :data="videos" border size="small" style="width: 100%">
        <el-table-column fixed prop="id" label="视频id"> </el-table-column>
        <el-table-column fixed prop="uinfo.id" label="发布者id">
        </el-table-column>
        <el-table-column fixed prop="uinfo.name" label="发布者">
        </el-table-column>
        <el-table-column prop="tagName" label="分类"> </el-table-column>

        <el-table-column prop="title" label="视频标题"> </el-table-column>

        <el-table-column fixed="right" label="封面&视频">
          <template slot-scope="scope">
            <el-button
              @click="
                (dialoger = true),
                  (urls.vurl = scope.row.vurl),
                  (urls.iurl = scope.row.iurl),
                  (data.id = scope.row.id)
              "
              type="text"
              size="small"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      append-to-body
      class="dialog"
      title="封面&视频"
      :visible.sync="dialoger"
    >
    <div style="display:flex; justify-content: center;">
        <img :src=  "baseUrl+ urls.iurl"  style="width: 40%;">
       <span style="width: 2vw;"></span>
    <video style="width: 20vw;" controls="controls" :src="baseUrl + urls.vurl"></video>

    </div>

      <span style="margin-top: 1vh">note</span>
      <el-input v-model="data.note"></el-input>

      <div slot="footer" class="dialog-footer">
        <el-button @click="changeStatus(3)">驳回</el-button>
        <el-button type="primary" @click="changeStatus(2)">通过</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
  import { mapGetters } from "vuex";
export default {
    computed: {
    ...mapGetters(["baseUrl"]),
  },
  data() {
    return {
      dialoger: false,
      urls: {
        iurl: "",
        vurl: "",
      },
   

      data: {
        id: "",
        status: "",
        note: "",
      },
      videos: [],
    };
  },
  methods: {
    async changeStatus(status) {
        this.data.status = status
      const { data: res } = 
         await this.$http.post("/videos/audit", this.data);
      if (res.code == 200) {
        this.$msg.fail("成功");
      }
      this.dialoger = false;
      this.data = {
        id: "",
        status: "",
        note: "",
      }

    },

    async getWaits() {
      const { data: res } = await this.$http.get("/videos/waits");
      if (res.code == 200) {
        this.videos = res.data;
      }
    },
  },
  created() {
    this.getWaits();
  },
};
</script>
  
  <style>
.box {
  width: 100%;
}
.tag-list {
  height: 85vh; 
}
</style>